/**
 * Core Codemirror styles.
 */
.CodeMirror {
    /* Set height, width, borders, and global font properties here */
    font-family    : @font-family-monospace;
    height         : auto;
    viewportMargin : Infinity;
    position       : relative;
    overflow       : hidden;
}

.editor--fullscreen.-preview {
    .CodeMirror {
        height      : 100% !important;
        position    : absolute !important;
        top         : 0 !important;
        bottom      : 0 !important;
        left        : 0 !important;
        right       : 0 !important;
    }
    .CodeMirror-scroll {
        overflow: scroll !important;
    }
}

/**
 * Scrollbar
 */
.CodeMirror-scroll {
    overflow: scroll !important; /* Things will break if this is overridden */
    /* 30px is the magic margin used to hide the element's real scrollbars */
    /* See overflow: hidden in .CodeMirror */

    margin-bottom  : -30px;
    margin-right   : -30px;
    padding-bottom : 30px;
    height         : 100%;
    outline        : none; // Prevent dragging from highlighting the element
    position       : relative;
}
.CodeMirror-sizer {
    position     : relative;
    border-right : 30px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
before actual scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none;
}
.CodeMirror-vscrollbar {
    right: 0; top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.CodeMirror-hscrollbar {
    bottom: 0; left: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
    right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
    left: 0; bottom: 0;
}

/**
 * Paddings
 */
.CodeMirror-lines {
    padding    : 15px 0 100px; // Vertical padding around content
    cursor     : text;
    min-height : 1px;       // prevents collapsing before first draw
}
.CodeMirror pre {
    padding: 0 4px; // Horizontal padding of content

    /* Reset some styles that the rest of the page might have set */
    -moz-border-radius    : 0;
    -webkit-border-radius : 0;
    border-radius         : 0;

    border-width  : 0;
    background    : transparent;
    font-family   : inherit;
    font-size     : @font-size-base * 1;
    line-height   : floor((@font-size-base * 1 * @line-height-base));
    margin        : 0;
    white-space   : pre;
    word-wrap     : normal;
    color         : inherit;
    z-index       : 2;
    position      : relative;
    overflow      : visible;
    -webkit-tap-highlight-color: transparent;
}
.CodeMirror-wrap pre {
    word-wrap   : break-word;
    white-space : pre-wrap;
    word-break  : normal;
}

.CodeMirror-linebackground {
    position : absolute;
    left     : 0;
    right    : 0;
    top      : 0;
    bottom   : 0;
    z-index  : 0;
}

.CodeMirror-linewidget {
    position : relative;
    z-index  : 2;
    overflow : auto;
}

.CodeMirror-code {
    outline: none;
}

// Force content-box sizing for the elements where we expect it
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
    -moz-box-sizing : content-box;
    box-sizing      : content-box;
}

.CodeMirror-measure {
    position   : absolute;
    width      : 100%;
    height     : 0;
    overflow   : hidden;
    visibility : hidden;
}

// The little square between H and V scrollbars
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
    background-color: white;
}

.CodeMirror-measure pre {
    position: static;
}

.CodeMirror-selected {
    background: #d9d9d9;
}
.CodeMirror-focused .CodeMirror-selected {
    background: #d7d4f0;
}
.CodeMirror-crosshair {
    cursor: crosshair;
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
    background: #d7d4f0;
}
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
    background: #d7d4f0;
}
.cm-searching {
    background : #ffa;
    background : rgba(255, 255, 0, .4);
}

// IE7 hack to prevent it from returning funny offsetTops on the spans
.CodeMirror span { *vertical-align: text-bottom; }

// Used to force a border model for a node
.cm-force-border { padding-right: .1px; }

// See issue #2901
.cm-tab-wrap-hack:after { content: ''; }

// Help users use markselection to safely style text background
span.CodeMirror-selectedtext { background: none; }

/**
 * Gutter
 */
.CodeMirror-gutters {
    border-right     : 1px solid #ddd;
    background-color : #f7f7f7;
    white-space      : nowrap;
    position         : absolute;
    left             : 0;
    top              : 0;
    z-index          : 3;
}
.CodeMirror-gutter {
    white-space   : normal;
    height        : 100%;
    display       : inline-block;
    margin-bottom : -30px;
    /* Hack to make IE7 behave */
    *zoom:1;
    *display:inline;
}
.CodeMirror-gutter-wrapper {
    position   : absolute;
    z-index    : 4;
    background : none !important;
    border     : none !important;
}
.CodeMirror-gutter-background {
    position : absolute;
    top      : 0;
    bottom   : 0;
    z-index  : 4;
}
.CodeMirror-gutter-elt {
    position : absolute;
    cursor   : default;
    z-index  : 4;
}
.CodeMirror-gutter-wrapper {
    -webkit-user-select : none;
    -moz-user-select    : none;
    user-select         : none;
}

.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
    padding     : 0 3px 0 5px;
    min-width   : 20px;
    text-align  : right;
    color       : #999;
    white-space : nowrap;
}

.CodeMirror-guttermarker {
    color: black;
}
.CodeMirror-guttermarker-subtle {
    color: #999;
}

/**
 * Cursors
 */
.CodeMirror-cursor {
    position     : absolute;
    border-left  : 1px solid black;
    border-right : none;
    width        : 0;
}

// Shown when moving in bi-directional text
.CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
    width: auto;
    border: 0;
    background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1;
}

.cm-animate-fat-cursor {
    width             : auto;
    border            : 0;
    -webkit-animation : blink 1.06s steps(1) infinite;
    -moz-animation    : blink 1.06s steps(1) infinite;
    animation         : blink 1.06s steps(1) infinite;
    background-color  : #7e7;
}

div.CodeMirror-cursors {
    visibility : hidden;
    position   : relative;
    z-index    : 3;
}
div.CodeMirror-dragcursors {
    visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible;
}

@-moz-keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
}
@-webkit-keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
}
@keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
}

// Can style cursor different in overwrite (non-insert) mode
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab {
    display         : inline-block;
    text-decoration : inherit;
}

.CodeMirror-ruler {
    border-left : 1px solid #ccc;
    position    : absolute;
}

@media print {
    // Hide the cursor when printing
    .CodeMirror div.CodeMirror-cursors {
        visibility: hidden;
    }
}

.editor--fullscreen.-preview {
    .CodeMirror-lines {
        padding-left: 10px;
        padding-right: 10px;
    }
}
